<template>
	<div class="member-apply">
		<div class="top">
			<div class="socialTitle clearfix">
				<!-- <div class="titleName fl">会员提现审批</div> -->
				<div class="item-title-account fl">
					<span class="title-icon"></span>会员提现审批
				</div>
				<!-- <div class="fr">
          <el-button round icon="el-icon-download" style="color:#0064e4;border-color:#0064e4" @click="importData()">导出</el-button>
        </div>-->
				<!-- <div class="export-btn fr" @click="importAll" style="margin: 0 0 0 10px"> -->
				<!-- <div
          class="export-btn fr"
          @change="uploadFile($event)"
          style="margin: 0 0 0 10px"
          v-if="global.powerAllBtn.cwgl.hytxdrBtn"
        >
          <input
            type="file"
            name
            id="uploadFile"
            style="display: none"
          >
          <label for="uploadFile">导入</label>
          <img
            src="../../../assets/img/export.png"
            alt
          >
        </div>
        <div
          class="export-btn fr"
          @click="exportAll"
          v-if="global.powerAllBtn.cwgl.hytxdcBtn"
        >
          <img
            src="../../../assets/img/import.png"
            alt
          >
          <span>导出</span>
        </div> -->
			</div>
			<div class="search-nav-box">
				<div class="item-search">
					<span>{{title}}</span>
					<!-- <el-date-picker
            class="item-data-serach"
            v-model="searchData.createTime"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>-->
					<el-date-picker v-model="searchData.begintime" type="date" placeholder="请选择"
						value-format="yyyy-MM-dd" style="width:140px"></el-date-picker>
					<span class="separator">~</span>
					<el-date-picker v-model="searchData.endtime" type="date" placeholder="请选择" value-format="yyyy-MM-dd"
						style="width:140px"></el-date-picker>
				</div>
				<div class="item-search">
					<span>地区</span>
					<city-Cascader :citys="searchData.citys" :level="level" @handleChange="handleCityChange">
					</city-Cascader>
					<!-- <el-cascader
            popper-class="regions"
            :options="addressOptions"
            v-model="searchData.regions"
            :show-all-levels="false"
            :clearable="true"
            @change="changeCity()"
          ></el-cascader>-->
				</div>
				<div class="item-botton" @click="SearchInfo()">查询</div>
				<!-- <div class="btn-right"> -->
				<!-- <div class="export-btn fr" @click="exportData">
            <img src="../../../assets/img/export.png" alt>
            <span>导出</span>
        </div>-->
				<!-- <div class="btn import_btn" @click="importAll()">导入</div>
        <div class="btn export_btn" @click="exportAll()">导出</div>-->
				<!-- </div> -->

			</div>
			<div class="main">

				<!-- <el-switch 
		  v-model="switchValue"
		  inactive-text="IOS提现按钮" @change="subSwitch"
		  active-color="#13ce66" class="switchBtn"
		  inactive-color="#ff4949"> -->

				</el-switch>
				<ul class="checkTab">
					<template v-for="item in tabs">
						<!-- 消息的气泡 -->
						<el-badge :value="totalNum" :max="99" class="item"
							:hidden="item.label != '待审核' || totalNum == 0">
							<li :key="item.order" v-html="`${item.label}`" :class="{'active':current === item.order}"
								@click="clickTab(item)"></li>
						</el-badge>
					</template>
				</ul>
			</div>
		</div>
		<div class="contain" id="jhTable">
			<!-- 待审核 -->
			<el-table class="table" stripe border cell-class-name="common-table__cell"
				header-cell-class-name="common-table__header" :data="waiteList" style="width: 100%"
				v-show="current === 1 || current === 4 ">
				<el-table-column fixed prop="nickname" label="会员名称" align="center"></el-table-column>
				<!-- <el-table-column prop="cardnum" label="证件类型" align="center">
        </el-table-column>-->
				<el-table-column prop="cardtype" label="证件类型" align="center"></el-table-column>
				<el-table-column prop="cardnum" label="证件号码" align="center"></el-table-column>
				<el-table-column prop="sex" label="性别" align="center"></el-table-column>
				<el-table-column prop="birthdate" label="出生年月" align="center"></el-table-column>
				<el-table-column prop="banktype" label="提现银行" align="center"></el-table-column>
				<el-table-column prop="usenum" label="提现银行账户" align="center"></el-table-column>
				<el-table-column prop="telnum" label="手机号码" align="center"></el-table-column>
				<el-table-column prop="outintegral" label="提现金额(元)" align="center"></el-table-column>
				<el-table-column prop="personaltax" label="个人所得税(元)" align="center"></el-table-column>
				<el-table-column prop="fee" label="手续费(元)" align="center"></el-table-column>
				<el-table-column prop="arriveintegral" label="实际到账金额(元)" align="center"></el-table-column>
				<el-table-column prop="inserdate" label="申请时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center" v-if="optShowOne  && current === 1">
					<template slot-scope="scope">
						<!-- <span>未处理</span> -->
						<!-- <span>{{scope.row.status == '0'?}}</span> -->
						<el-button type="text" class="operate" @click="toReport(scope.row,'11')"
							v-if="global.powerAllBtn.cwgl.hytxsbBtn && optShowOne">审批上报</el-button>
						<!-- <el-button
              type="text"
              class="operate"
              @click="openDialog(scope.row)"
              v-if="global.powerAllBtn.cwgl.hytxspBtn && optShowTwo"
            >审批</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<!-- 提现成功 -->
			<el-table class="table" stripe :data="waiteList" style="width: 100%" v-show="current === 2 " border>
				<el-table-column fixed prop="nickname" label="会员名称" align="center"></el-table-column>
				<el-table-column prop="cardnum" label="证件号码" align="center"></el-table-column>
				<el-table-column prop="banktype" label="提现银行" align="center"></el-table-column>
				<el-table-column prop="usenum" label="提现银行账户" align="center"></el-table-column>
				<el-table-column prop="telnum" label="手机号码" align="center"></el-table-column>
				<el-table-column prop="outintegral" label="提现金额(元)" align="center"></el-table-column>
				<el-table-column prop="personaltax" label="个人所得税(元)" align="center"></el-table-column>
				<el-table-column prop="fee" label="手续费(元)" align="center"></el-table-column>
				<el-table-column prop="arriveintegral" label="实际到账金额(元)" align="center"></el-table-column>
				<el-table-column prop="inserdate" label="申请时间" align="center"></el-table-column>
				<el-table-column prop="auditorid" label="审批人" align="center"></el-table-column>
				<el-table-column prop="auditdate" label="审批时间" align="center"></el-table-column>


				<el-table-column align="center" label="操作" width="100" v-if="departshow">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="refundBtn(scope.row)">第三方退款</el-button>
					</template>
				</el-table-column>
				<!-- <el-table-column
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" class="operate" @click="openDialog(scope.row)">详情</el-button>
            <span>已处理</span>
          </template>
        </el-table-column> -->
			</el-table>
			<!-- 提现失败 -->
			<el-table class="table" stripe :data="waiteList" style="width: 100%" v-show="current === 3" border>
				<el-table-column fixed prop="nickname" label="会员名称" align="center"></el-table-column>
				<el-table-column prop="cardnum" label="证件号码" align="center"></el-table-column>
				<el-table-column prop="banktype" label="提现银行" align="center"></el-table-column>
				<el-table-column prop="usenum" label="提现银行账户" align="center"></el-table-column>
				<el-table-column prop="telnum" label="手机号码" align="center"></el-table-column>
				<el-table-column prop="outintegral" label="提现金额(元)" align="center"></el-table-column>
				<el-table-column prop="personaltax" label="个人所得税(元)" align="center"></el-table-column>
				<el-table-column prop="fee" label="手续费(元)" align="center"></el-table-column>
				<el-table-column prop="arriveintegral" label="实际到账金额(元)" align="center"></el-table-column>
				<el-table-column prop="inserdate" label="申请时间" align="center"></el-table-column>
				<el-table-column prop="auditorid" label="审批人" align="center"></el-table-column>
				<el-table-column prop="auditdate" label="审批时间" align="center"></el-table-column>
				<!-- <el-table-column
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <span>已处理</span>
            <el-button type="text" class="operate" @click="openDialog(scope.row)">详情</el-button>
          </template>
        </el-table-column> -->
			</el-table>
			<!-- 页码数 -->
			<div class="table-pagination-number" style="padding: 20px 0;">
				<div class="pagination-number">
					<!-- <el-pagination
            @current-change="PageCurrentChange"
            :total="Page.total"
            :current-page="Page.pageNum"
            :page-size="Page.pageSize"
            layout="total, prev, pager, next, jumper"
            background
          ></el-pagination>-->
					<el-pagination @size-change="handleSizeChange" @current-change="PageCurrentChange"
						:current-page="Page.pageNum" :page-sizes="[10,20, 30, 50,100]" :page-size="Page.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="Page.total" background></el-pagination>
				</div>
			</div>
		</div>

		<el-dialog width="30%" :visible.sync="refundDialog">
			<div class="reContent">
				<h2>提示</h2>
				<p>请确认提现申请失败，且第三方银行已操作退款</p>
				<p><span style="line-height: 58px;">失败原因：</span>
					<el-input type="textarea" :rows="2" placeholder="请输入退款理由" v-model="reson" style="width: 300px;">
					</el-input>
				</p>
				<p style="margin-top: 28px; margin-bottom: 40px;">
					<el-button type="info" @click="refundDialog=false">取消</el-button>
					<el-button type="primary" style="margin-left: 20px;" @click="subRefund">确认</el-button>
				</p>
			</div>

		</el-dialog>

		<el-dialog width="50%" :visible.sync="dialogTableVisible" class="jhdialog">
			<!-- <div class="dialog">
        <el-row>
          <el-col :span="12">
            <el-radio v-model="radio" label="1">提现成功</el-radio>
          </el-col>
          <el-col :span="12">
            <el-radio v-model="radio" label="2">提现失败</el-radio>
          </el-col>
        </el-row>
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
        </el-input>
        <div class="btn">
          <button @click="concelCash()">取消</button>
          <button @click="confirmCash()">确定</button>
        </div>
      </div>-->
			<div class="comTitle clearfix">
				<div class="titleName fl" v-html="companyInfo.nickname"></div>
				<div :class="{'fr':true,'status':current===1,'pass':current===2,'red':current===3}">
					{{tabs[current-1].label}}
				</div>
			</div>
			<div style="padding:0 20px 20px;">
				<div class="title">提现信息</div>
				<ul class="info clearfix">
					<li>
						<div class="infoLabel">会员名称:</div>
						<div class="infoText" v-html="companyInfo.nickname"></div>
					</li>
					<li>
						<div class="infoLabel">证件号码:</div>
						<div class="infoText" v-html="companyInfo.cardnum"></div>
					</li>
					<li>
						<div class="infoLabel">提现银行:</div>
						<div class="infoText" v-html="companyInfo.banktype"></div>
					</li>
					<li>
						<div class="infoLabel">银行账户:</div>
						<div class="infoText" v-html="companyInfo.usenum"></div>
					</li>
					<li>
						<div class="infoLabel">手机号码:</div>
						<div class="infoText" v-html="companyInfo.telnum"></div>
					</li>
					<li>
						<div class="infoLabel">提现金额:</div>
						<div class="infoText red" v-html="`${companyInfo.outintegral}元`"></div>
					</li>
					<li>
						<div class="infoLabel">个人所得税(元):</div>
						<!-- <div class="infoText" v-html="companyInfo.nickname"></div> -->
						<div class="infoText red" v-html="`${companyInfo.personaltax}元`"></div>
					</li>
					<li>
						<div class="infoLabel">手续费(元):</div>
						<div class="infoText red" v-html="`${companyInfo.fee}元`"></div>
					</li>
					<li>
						<div class="infoLabel">申请时间:</div>
						<div class="infoText" v-html="companyInfo.inserdate"></div>
					</li>
					<li>
						<div class="infoLabel">到账金额:</div>
						<div class="infoText red" v-html="`${companyInfo.arriveintegral}元`"></div>
						<div style="color:#959595;font-size:14px;display:inline-block">(税后)</div>
					</li>
				</ul>
				<div v-if="current===1" class="tabShow">
					<div class="title">提现审批结果</div>
					<div style="height:40px;display: flex;align-items: center;">
						<el-radio-group v-model="radio" style="padding:0 20px" @change="resultChange">
							<el-radio label="1">通过</el-radio>
							<el-radio label="2">未通过</el-radio>
						</el-radio-group>
						<el-input v-show="radio==='2'" style="width:400px" placeholder="请填写未通过原因" v-model="textarea">
						</el-input>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button @click="concelCash">取 消</el-button>
						<el-button type="primary" @click="confirmCash">提 交</el-button>
					</div>
				</div>
				<div class="tabShow" v-if="current!==1">
					<div class="title">提现审批信息</div>
					<ul class="info clearfix">
						<li>
							<div class="infoLabel">审批结果:</div>
							<div :class="{'infoText':true,'pass':current===2,'red':current===3}"
								v-html="tabs[current-1].label"></div>
						</li>
						<li>
							<div class="infoLabel">审批人:</div>
							<div class="infoText" v-html="companyInfo.auditorid"></div>
						</li>
						<li>
							<div class="infoLabel">审批时间:</div>
							<div class="infoText" v-html="companyInfo.auditdate"></div>
						</li>
						<li v-if="current===3">
							<div class="infoLabel">失败原因:</div>
							<div class="infoText" v-html="companyInfo.note"></div>
						</li>
					</ul>
				</div>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="warnDialogVisible" width="500px" @close="closeWarnDialog">
			<div class="warn-dialog-header">
				<span>上报原因</span>
			</div>
			<div class="warn-dialog-body">
				<div class="warn-dialog-body-title">发送内容</div>
				<el-input type="textarea" :rows="6" v-model.trim="reportContent"></el-input>
				<div class="warn-dialog-btn">
					<el-button style="margin-right: 30px;" @click="warnDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="confirmReport">确定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<style scope lang='less'>
	@import "../../socical/socialCheck/check.less";

	.member-apply {
		// .socialTitle1 {
		//   padding: 0 10px;
		// }
		background: #fff;
		margin: 0 18px;
		max-height: 500px;

		.top {
			.checkTab {
				margin-top: 20px;

				li {
					font-size: 16px;
				}
			}
		}

		// .titleName {
		//   font-size: 16px;
		// }
		.title-icon {
			padding-left: 12px;
			border-left: 12px solid #0064e4;
		}

		.item-title-account {
			line-height: 40px;
			margin-right: 20px;
		}

		.contain {
			background: #ffffff;
			padding: 0 20px;
		}

		.table {
			border: 1px solid #d2d2d2;
		}

		.dialog-footer {
			margin-top: 20px;
			text-align: center;
		}
	}

	.reContent {

		width: 500px;
		margin: 0 auto;
		padding: 15px 10px;
	}

	.reContent .el-button {
		width: 100px;
	}

	.reContent p {
		margin: 20px 20px;
		text-align: center;
		font-size: 20px;
	}

	.reContent h2 {
		padding-top: 30px;
		text-align: center;
	}

	//查询样式
	.search-nav-box {
		margin-top: 10px;
		height: 50px;
		display: flex;
		justify-content: space-between;
	}

	.item-search {
		height: 50px;
		line-height: 50px;
		display: flex;
	}

	.item-search:nth-child(1) {
		margin-left: 20px;
	}

	.el-cascader {
		line-height: 50px;
	}

	/* .item-search:nth-child(2){
    margin-left: 50px;
    margin-right: 50px;
} */
	.item-search span {
		margin-right: 5px;
		white-space: nowrap;
		display: inline-block;
		font-size: 14px;
		color: #727272;
	}

	.item-search:nth-child(3)>.regions {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.item-data-serach {
		margin-top: 5px;
	}

	.item-botton {
		width: 100px;
		height: 40px;
		line-height: 40px;
		margin: 5px 20px 5px 0px;
		color: #ffffff;
		cursor: pointer;
		background-color: #0064e4;
		text-align: center;
		border-radius: 4px;
	}

	.btn-right {
		display: flex;
		align-items: center;
	}

	.btn-right .btn {
		text-align: center;
		width: 96px;
		height: 40px;
		line-height: 40px;
		background-color: #ffffff;
		border-radius: 20px;
		cursor: pointer;
		border: solid 1px #0064e4;
	}

	.btn-right .btn:first-child {
		margin-right: 10px;
	}

	/* 上报原因样式 */
	.warn-dialog-header {
		font-size: 16px;
		box-sizing: border-box;
		padding: 20px;
		border-bottom: 1px solid #bfbfbf;
	}

	.warn-dialog-header::before {
		content: "";
		border-left: 8px solid #0064e4;
		margin-right: 10px;
	}

	.warn-dialog-body {
		box-sizing: border-box;
		padding: 20px;
	}

	.warn-dialog-body-title {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.warn-dialog-btn {
		margin-top: 20px;
		text-align: center;
	}
</style>
<style>
	.member-apply .el-dialog__header {
		padding-bottom: 0;
	}

	.main {
		padding: 0 20px;
		position: relative;
	}

	.switchBtn {
		position: absolute;
		right: 20px;
		top: 10px;
		z-index: 3;
	}
</style>


<script src='./index.js'></script>
